{% extends 'index.html' %}
{% load static %}


{% block mycss %}
    <script type="text/javascript" src="{% static 'js/echarts/jquery-3.2.1.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/echarts/echarts.js' %}"></script>
    <style>
        .ana-h4{
            color:#333333;
            margin-bottom: 5px;
        }
        pre {
            outline: 1px solid #ccc;
            width: 100%;
            height: auto;
            display: none
        }

        .string {
            color: green;
        }

        .number {
            color: darkorange;
        }

        .boolean {
            color: blue;
        }

        .null {
            color: magenta;
        }

        .key {
            color: red;
        }
    </style>
{% endblock %}

{% block title %}
    <span class="navbar-page-title" id="datashow_title">知识图谱服务接口 - 知识图谱分析服务</span>
{% endblock %}

{% block content %}
    <div class="container-fluid">
        <!-- 知识图谱 - 关联分析页面展示 -->
        <div class="row">
            <div class="col-lg-12">
                <h4 class="ana-h4">知识图谱关联分析服务</h4>
                <div class="card">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-xs-3">
                                <input type="text" placeholder="请输入开始节点名称" id="start_point" class="form-control my-input">
                            </div>
                            <div class="col-xs-3">
                                <input type="text" placeholder="请输入结束节点名称" id="end_point"
                                       class="form-control my-input">
                            </div>
                            <div class="col-xs-3">
                                <input type="text" placeholder="请输入最大跳数" id="max_num"
                                       class="form-control my-input">
                            </div>
                            <div class="col-xs-2">
                                <button class='btn btn-primary my-btn' type="submit" id="noumenon_serach">查询</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <pre id="correlation_analysis"></pre>
        <!-- 知识图谱 - 地图分析 -->
        <div class="row">
            <div class="col-lg-12">
                <h4 class="ana-h4">知识图谱地图分析服务</h4>
                <div class="card">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-xs-6">
                                <input type="text" id="entity" class="form-control my-input" placeholder="请输入事件名称" value="">
                            </div>
                            <div class="col-xs-2">
                                <button class='btn btn-primary my-btn' type="submit" id="map_serach">查询
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <pre id="map_pic"></pre>
        <!-- 知识图谱 - 直方图 -->
        <div class="row">
            <div class="col-lg-12">
                <h4 class="ana-h4">知识图谱直方图分析服务</h4>
                <div class="card">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-xs-6">
                                <input type="text" id="histogram_text" placeholder="请输入查询节点"
                                       class="form-control my-input">
                            </div>
                            <div class="col-xs-2">
                                <button class='btn btn-primary my-btn' type="submit" id="histogram_button">查询</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <pre id="histogram_pic"></pre>
        <!-- 知识图谱 - 时间轴 -->
        <div class="row">
            <div class="col-lg-12">
                <h4 class="ana-h4">时间轴分析服务</h4>
                <div class="card">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-xs-6">
                                <input type="text" placeholder="请输入查询节点" id="Timeline_text"
                                       class="form-control my-input">
                            </div>
                            <div class="col-xs-2">
                                <button class='btn btn-primary my-btn' type="submit" id="Timeline_button">查询</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <pre id="Timeline_pic"></pre>
    </div>
{% endblock %}

{% block myjs %}
    <script type="text/javascript">
        // 固定左侧菜单栏
        {#document.getElementById("zstpfwjk").style.display = 'block';#}
        {#document.getElementById("zstpfxfw").style.backgroundColor = 'rgba(30,21,21,0.44)';#}

        // 封装成json格式数据
        function jsonShowFn(json) {
            console.log(json)
            {#json = JSON.parse(json)#}
            //if (!json.match("^\{(.+:.+,*){1,}\}$")) {
            //    return json           //判断是否是json数据，不是直接返回
            //}

            //if (typeof json != 'string') {
            //    json = JSON.stringify(json, undefined, 2);
            //}
            json = JSON.stringify(json, undefined, 2);

            json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
            return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
                var cls = 'number';
                if (/^"/.test(match)) {
                    if (/:$/.test(match)) {
                        cls = 'key';
                    } else {
                        cls = 'string';
                    }
                } else if (/true|false/.test(match)) {
                    cls = 'boolean';
                } else if (/null/.test(match)) {
                    cls = 'null';
                }
                return '<span class="' + cls + '">' + match + '</span>';
            });
        }

        // 关联分析接口
        $('#noumenon_serach').click(function () {
            var start_point = $('#start_point').val();
            var end_point = $('#end_point').val();
            var max_num = $('#max_num').val();
            var formdata = new FormData();
            formdata.append("start_point", start_point);
            formdata.append("end_point", end_point);
            formdata.append("max_num", max_num);

            $.ajax({
                url: '{% url 'association_analysis' %}',
                type: 'POST',
                async: false,
                data: formdata,
                processData: false, // 使数据不做处理
                contentType: false, // 不要设置Content-Type请求头
                success: function (data) {
                    // 执行函数
                    $('#correlation_analysis').css({
                        display: 'block',
                    }).html(jsonShowFn(data));
                    // $("#correlation_analysis").text(JSON.stringify(data));
                }
            });
        });

        // 地图分析接口
        $('#map_serach').click(function () {

            var entity = $('#entity').val();
            var formdata = new FormData();
            formdata.append("entity", entity);

            $.ajax({
                url: '{% url 'map_analysis' %}',
                type: 'POST',
                async: false,
                data: formdata,
                processData: false, // 使数据不做处理
                contentType: false, // 不要设置Content-Type请求头
                success: function (data) {
                    // $("#map_pic").text(JSON.stringify(data));
                    $('#map_pic').css({
                        display: 'block',
                    }).html(jsonShowFn(data));
                }
            });
        });

        // 直方图分析接口
        $('#histogram_button').click(function () {
            var histogram_text = $('#histogram_text').val();
            var formdata = new FormData();
            formdata.append("histogram_text", histogram_text);
            $.ajax({
                url: '{% url 'histogram' %}',
                type: 'POST',
                async: false,
                data: formdata,
                processData: false, // 使数据不做处理
                contentType: false, // 不要设置Content-Type请求头
                success: function (data) {
                    // $("#histogram_pic").text(JSON.stringify(data));
                    $('#histogram_pic').css({
                        display: 'block',
                    }).html(jsonShowFn(data));
                }
            });
        });

        // 时间轴分析接口
        $('#Timeline_button').click(function () {
            var Timeline_text = $('#Timeline_text').val();
            $.ajax({
                url: '{% url 'timeline' %}',
                type: 'GET',
                async: false,
                data: {"Timeline_text": Timeline_text},
                success: function (data) {
                    // $("#Timeline_pic").text(JSON.stringify(data));
                    $('#Timeline_pic').css({
                        display: 'block',
                    }).html(jsonShowFn(data));
                }
            })
        });
    </script>
{% endblock %}
